<template>
  <div class="box">
    <div :id="id" :style="{height:height,width:width}" />
  </div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/dark')
import resize from '@/components/Charts/mixins/resize'
import { fetchEquipmentInfo } from '@/api/equipment-card'
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    equipmentNumber: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '320px'
    }
  },
  data() {
    return {
      listQuery: {
        equipmentNumber: this.equipmentNumber
      },
      equipmentName: '',
      electricQuantity: ''
    }
  },
  watch: {
    equipmentNumber() {
      this.listQuery.equipmentNumber = this.equipmentNumber
      this.update()
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    this.timer = setInterval(this.update, 1000 * 60 * 15)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    update() {
      fetchEquipmentInfo(this.listQuery.equipmentNumber).then((res) => {
        this.equipmentName = res.data.equipmentName
        this.electricQuantity = res.data.electricQuantity
        setTimeout(() => {
        }, 1.5 * 1000)
        this.chart.setOption({
          series: [
            {
              type: 'gauge',
              center: ['50%', '58%'],
              title: {
                show: true,
                fontSize: 18,
                color: 'rgba(23, 221, 39, 1)',
                offsetCenter: ['0', '-120%']
              },
              axisLine: {
                lineStyle: {
                  width: 30,
                  color: [
                    [0.3, '#fd666d'],
                    [0.7, '#37a2da'],
                    [1, '#67e0e3']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                },
                length: '60%',
                width: 5
              },
              axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                  color: '#fff',
                  width: 4
                }
              },
              axisLabel: {
                color: 'auto',
                distance: 5,
                fontSize: 15
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}%',
                offsetCenter: ['0', '80%'],
                color: 'auto'
              },
              radius: '80%',
              data: [
                {
                  name: this.equipmentName + '--设备电量',
                  value: this.electricQuantity
                }
              ]
            }
          ]
        })
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      this.chart.setOption(
        {
          type: 'gauge',
          data: [
            {
            }
          ]
        }
      )
      this.update()
    }
  }
}
</script>
<style scoped>
.box {
  /*box-shadow: 0 4px 8px 0 rgba(31, 29, 29, 0.2);*/
  box-shadow: 0 8px 16px 0;
  transition: 0.3s;
  width: 100%;
  border-radius: 10px;
  /*background-color: #2c3e50;*/
  /*background-color: #536170;*/
}
.box:hover {
  /*box-shadow: 0 8px 16px 0;*/
}
</style>
